<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .tab ul {
        overflow: hidden;
        padding: 0;
        margin: 0;
      }

      .tab ul li {
        box-sizing: border-box;
        padding: 0;
        float: left;
        width: 100px;
        height: 45px;
        line-height: 45px;
        list-style: none;
        text-align: center;
        border-top: 1px solid blue;
        border-right: 1px solid blue;
        cursor: pointer;
      }

      .tab ul li:first-child {
        border-left: 1px solid blue;
      }

      .tab ul li.active {
        background-color: orange;
      }

      .tab div {
        width: 500px;
        height: 300px;
        display: none;
        text-align: center;
        font-size: 30px;
        line-height: 300px;
        border: 1px solid blue;
        border-top: 0px;
      }

      .tab div.current {
        display: block;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="tab">
        <!--  tab栏  -->
        <ul>
          <li v-for="(v, i) in fruitArr" :key="v.id" :class="{ active: currentIndex === i }" @click="onClickName(i)">
            {{ v.name }}
          </li>
        </ul>
        <!--  对应显示的图片 -->
        <div v-for="(v, i) in fruitArr" :key="v.id" :class="{ current: currentIndex === i }">
          <img :src="v.img" />
        </div>
      </div>
    </div>
    <script src="../vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          currentIndex: 0,
          fruitArr: [
            { id: 1, name: 'apple', img: 'img/apple.png' },
            { id: 2, name: 'orange', img: 'img/orange.png' },
            { id: 3, name: 'lemon', img: 'img/lemon.png' },
          ],
        },
        methods: {
          onClickName(i) {
            console.log('hehe', i);
            this.currentIndex = i;
          },
        },
      });
    </script>
  </body>
</html>
